<template>
  <div class="car-prods">

      <el-row :gutter="16" style="line-height:40px;margin-bottom:20px">

        <el-col :xs="4" :sm="4" :md="3" :lg="2" :xl="2">
            <el-button size="mini" icon="el-icon-back" style="width:80px" @click="backCarIndex">返回</el-button>
          </el-col>
          <el-col :xs="8" :sm="8" :md="6" :lg="5" :xl="5">
              <div style="fontSize:18px">车辆所属装备信息</div>
          </el-col>

          <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3">
            <el-button type="primary" size="mini" icon="el-icon-plus" style="width:100px" @click="addProdInCar">添加装备</el-button>
          </el-col>
          <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3">
            <el-button type="primary" size="mini" icon="el-icon-delete" style="width:100px" @click="delProdInCar">卸载装备</el-button>
          </el-col>
         

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table :data="carProdlist" ref="prodInfos" border style="width: 100%" @selection-change="selectProds">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="图片" width="60">
              <template slot-scope="scope">
                <div>
                  <img style="width:40px;height:40px;" :src="scope.row.prodImg" alt="">
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="categoryTwoName" label="装备细类"></el-table-column> -->
            <el-table-column prop="prodCode" label="装备编号"></el-table-column>
            <el-table-column prop="prodName" label="装备名称"></el-table-column>
            <el-table-column prop="prodSpecial" label="规格"></el-table-column>
            <el-table-column prop="emit" label="单位"></el-table-column>
            <el-table-column prop="num" label="数量"></el-table-column>  
            <!-- <el-table-column prop="supplierName" label="供应商名称"></el-table-column>  
            <el-table-column prop="prodDate" label="到期时间"></el-table-column> -->
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-delete" @click="viewCarProd(scope.row)">卸载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <div class="autospace"></div>

      <!-- <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="['10']"
            layout="total, prev, pager, next"
            :total="30">
          </el-pagination>
        </el-col>
      </el-row> -->

      <selectstock :carId="carId" :carSelectprod="carSelectprod" :selectprodDialog.sync="selectprodDialog"></selectstock>
      <delcarprod :selectedProd="selectedProd" :delSelectCarprod.sync="delSelectCarprod"></delcarprod>
  </div>
</template>

<script>
import { GetProduct, SelectByProdInfo } from '@/api/prod';
import { GetCarProdById } from '@/api/car';
import { GetStockInfo, SearchStockInfo } from '@/api/outstore';
import { getStore } from '@/utils/app.js';
import selectstock from '@/components/selectStock';
import delcarprod from './delcarprod';

export default {
  name: 'carprods',
  components: {
    selectstock,
    delcarprod
  },

  data() {
    return {
        selectprodDialog: false,
        delSelectCarprod: false,
        carSelectprod: true,
        carProdlist: [],
        selectedProd: [],
        carId: null,
    }
    
  },
  watch: {
    delSelectCarprod(newVal) {
      if (!newVal) {
        setTimeout(() => {
          this.getCarProds();
          this.selectedProd = [];
          this.$refs.prodInfos.clearSelection()
        }, 1000)
      }
    },
    selectprodDialog(newVal) {
      if (!newVal) {
        setTimeout(() => {
          this.getCarProds();
        }, 1000)
      }
    }
  },
  computed: {
    storeid() {
      return this.$store.state.store.store_id || getStore();
    },
    main_store() {
      return this.$store.state.store.main_store;
    },
  },
  mounted() {
    this.carId = this.$route.query.carId;
    this.getCarProds()
    this.selectedProd = []
  },
  methods:{
    backCarIndex() {
        this.$router.push({
            path: '/carindex'
        })
    },
    handleSizeChange(val) {
        
    },
    handleCurrentChange(val) {

    },
    // 获取车辆装备
    getCarProds() {
      GetCarProdById(this.carId).then( res => {
        this.carProdlist = res.data
      })
    },
    
    selectProds(val) {
        this.selectedProd = val;
    },
    // 添加装备
    addProdInCar() {
      this.selectprodDialog = true;
    },
    delProdInCar() {
      if ( this.selectedProd && this.selectedProd.length == 0) {
          this.$message({
            message: '请先选择车辆装备',
            type: 'success'
          })
      } else {
        this.delSelectCarprod = true;
      }
    },
    viewCarProd(data) {
      this.selectedProd.push(data);
      this.delSelectCarprod = true;
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,100,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
  .top-add {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
  }
</style>
  
